/*
 * Copyright (c) 2007-2020 西安交通信息投资营运有限公司 版权所有
 * 作者:马星俊
 */

import React, {FC, useMemo} from 'react';
import useList, {ListOperate} from '@/hooks/useList';
import {ProColumns} from '@ant-design/pro-table';
import {Button, Input, Switch} from 'antd';
import service from './service';
import {SysRoleModel} from './data';
import Edit from './components/Edit';
import {getStatusEnum, hasPermission} from '@/utils/utils';
import useDelete from "@/hooks/useDelete";
import ProTableCrud, {ProTableCrudOperate} from "@/components/ProTableCrud";
import Details from "@/pages/sys/role/components/Details";
import style from "@/pages/sys/dept/index.less";
import config from "@/config";
import Permission from "@/components/Permission";
import {DialogOperate} from "@/global";
import useDialog from "@/hooks/useDialog";
import Authorize from "@/pages/sys/role/components/Authorize";

/** 系统角色模块 */
const RolePage: FC = () => {
  const editOperate = useDialog();
  const detailsOperate = useDialog();
  const authorizeOperate = useDialog();

  //List
  const listOperate = useList<SysRoleModel>({
    onLoad: (params) => service.selectPageList(params),
    onExport: (params) => service.export(params),
  });

  //Delete
  const deleteOperate = useDelete<SysRoleModel>({
    onDelete: (ids, _) => service.delete(ids.join()),
    onDeleteSucess: listOperate.handleReload,
  });

  //表格列
  const cols = useMemo(() => getCols(listOperate, detailsOperate), []);

  //增删改查选项
  const tableOperate: ProTableCrudOperate<SysRoleModel> = {
    cols,
    showCreate: hasPermission(config.permission.sysRole.insert),
    showEdit: hasPermission(config.permission.sysRole.update),
    showDelete: hasPermission(config.permission.sysRole.delete),
    showDetails: hasPermission(config.permission.sysRole.select),
    showExport: hasPermission(config.permission.sysRole.export),
    listOperate,
    editOperate,
    deleteOperate,
    detailsOperate,
    optionColumnWidth: 160,
    getColumnComandItems: (_, r) => ['details', (hasPermission(config.permission.sysRole.authorize) ?
        <a key="cmd-authorize" onClick={() => authorizeOperate.show({
          ids: [r.id],
          data: [{deptScope: r.deptScope}],
          onSubmitSucess: listOperate.handleReload
        })}>授权</a> : null
    ), 'edit', 'delete'],
    getToolbarItems: (_, rows) => ['create', 'edit', 'delete', (hasPermission(config.permission.sysRole.authorize) ?
      <Button
        disabled={!rows.selectedRowKeys || rows.selectedRowKeys.length == 0}
        onClick={() => authorizeOperate.show({
          ids: rows.selectedRowKeys,
          data: rows.selectedRows,
          onSubmitSucess: listOperate.handleReload
        })}><i className='fa fa-cog'/>授权</Button> : null), 'export',],
    getEditElement: (props) => (<Edit {...props}/>),
    getDetailsElement: (props) => (<Details {...props}/>),
  };


  return (
    <>
      <Permission code={config.permission.sysRole.select}>
        <ProTableCrud headerTitle="系统角色列表" rowKey="id" operate={tableOperate}/>
      </Permission>
      {authorizeOperate.visible && (<Authorize {...authorizeOperate} />)}
    </>
  );
};

/** 获取表格列 */
function getCols(listOperate: ListOperate<SysRoleModel>, detailsOperate: DialogOperate): (ProColumns<SysRoleModel>[]) {
  return [
    {
      title: '关键字',
      dataIndex: 'name1',
      key: 'name',
      hideInTable: true,
      renderFormItem: (item, {type, defaultRender, ...rest}) => {
        return (<Input {...rest} placeholder="请输入名称/简拼"/>)
      },
    },
    {
      title: '角色名称',
      dataIndex: 'name',
      hideInTable: false,
      hideInSearch: true,
      ellipsis: true,
      sorter: true,
      render: (_, r) => {
        return (
          <div className={style.overflow}>
            <a onClick={() => detailsOperate.show({id: r.id})}>{r.name}</a>
          </div>
        );
      },
    },
    {
      title: '角色编码',
      dataIndex: 'code',
      hideInTable: false,
      hideInSearch: true,
      ellipsis: true,
      sorter: true,
    },
    {
      title: '所属机构',
      dataIndex: 'deptName',
      hideInTable: false,
      hideInSearch: true,
      ellipsis: false,
      sorter: true,
    },
    {
      title: '机构权限',
      dataIndex: 'deptScopeName',
      hideInTable: false,
      hideInSearch: true,
      ellipsis: false,
      sorter: false,
    },
    {
      title: '状态',
      dataIndex: 'status',
      hideInTable: false,
      width: 80,
      ellipsis: false,
      filters: undefined,
      sorter: true,
      align: 'center',
      valueEnum: getStatusEnum(),
      initialValue: 'null',
      render: (_, r) => {
        return (
          <Switch checked={r.status} key={r.id} size={"small"}
                  onClick={async () => {
                    await service.updateStatus(r.id, r.status);
                    listOperate.handleReload();
                  }}
          />
        );
      },
      formItemProps: {
        'onSelect': listOperate.handleSearch
      },
    },
    {
      title: '备注',
      dataIndex: 'remark',
      hideInTable: false,
      hideInSearch: true,
      ellipsis: true,
      sorter: false,
    },
  ]
};

export default RolePage;

